// components/bottom/index.js
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    modalPosition: {
      type: String,
      value: 'middle'
    },
    modalWidth: {
      type: String,
      value: ''
    },
    modalHeight: {
      type: String,
      value: ''
    }
  },
  lifetimes: {
    attached() {
      // 在组件实例进入页面节点树时执行
      let pos = this.data.modalPosition
      let className = ''
      let y = 0
      switch (pos) {
        case 'bottom':
          className = 'pop-bottom'
          y = 500
          break
        case 'top':
          className = 'pop-top'
          y = -500
          break
        default:
          className = 'pop-middle'
          y = -10
          break
      }
      this.setData({
        popClass: className,
        translateYvalue: y
      })
    },
    detached() {
      // 在组件实例被从页面节点树移除时执行
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    isShowPop: false,
    animationData: {},
    bgAnimationData: {},
    popClass: '',
    translateYvalue: 0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    toggleMoal: function (e){
      if (!this.data.isShowPop){
        this.showModal()
      } else {
        this.hideModal()
      }
    },
    showModal: function (e) {
      // 用that取代this，防止不必要的情况发生
      var that = this;
      // 创建一个动画实例
      var animation = wx.createAnimation({
        // 动画持续时间
        duration: 400,
        // 定义动画效果，当前是匀速
        timingFunction: 'ease'
      })
      // 将该变量赋值给当前动画
      that.animation = animation
      // 先在y轴偏移，然后用step()完成一个动画
      animation.translateY(that.data.translateYvalue).step()
      
      // 用setData改变当前动画
      that.setData({
        // 通过export()方法导出数据
        animationData: animation.export(),
        // 改变view里面的Wx：if
        isShowPop: true
      })
      this.fadeInBg()
      // 设置setTimeout来改变y轴偏移量，实现有感觉的滑动
      setTimeout(function () {
        animation.translateY(0).step()
        that.setData({
          animationData: animation.export()
        })
      }, 200)
    },
    // 背景动画 渐显
    fadeInBg: function () {
      // 用that取代this，防止不必要的情况发生
      var that = this;
      // 创建一个动画实例
      var animationBg = wx.createAnimation({
        // 动画持续时间
        duration: 400,
        timingFunction: 'ease-in'
      })
      // 将该变量赋值给当前动画
      that.animationBg = animationBg
      // 先在y轴偏移，然后用step()完成一个动画
      animationBg.opacity(0).step();
      // 用setData改变当前动画
      that.setData({
        // 通过export()方法导出数据
        bgAnimationData: animationBg.export(),
      })
      setTimeout(function () {
        animationBg.opacity(0.7).step();
        that.setData({
          bgAnimationData: animationBg.export()
        })
      }, 200)
    },
    hideModal: function (e) {
      var that = this;
      this.fadeOutBg()
      var animation = wx.createAnimation({
        duration: 400,
        timingFunction: 'ease'
      })
      that.animation = animation
      animation.translateY(that.data.translateYvalue).step()
      that.setData({
        animationData: animation.export()
      })
      setTimeout(function () {
        animation.translateY(0).step()
        that.setData({
          animationData: animation.export(),
          isShowPop: false
        })
      }, 500)
    },

    // 背景动画 渐隐
    fadeOutBg: function () {
      // 用that取代this，防止不必要的情况发生
      var that = this;
      // 创建一个动画实例
      var animationBg = wx.createAnimation({
        // 动画持续时间
        duration: 200,
        timingFunction: 'ease-in-out'
      })
      // 将该变量赋值给当前动画
      that.animationBg = animationBg
      // 先在y轴偏移，然后用step()完成一个动画
      animationBg.opacity(0.7).step();
      // 用setData改变当前动画
      that.setData({
        // 通过export()方法导出数据
        bgAnimationData: animationBg.export(),
      })
      setTimeout(function () {
        animationBg.opacity(0).step();
        that.setData({
          bgAnimationData: animationBg.export()
        })
      }, 100)
    }
  }
})
